<template>
  <div class="search_box">
    <van-search
      v-model="searchValue"
      shape="round"
      show-action
      background="#1baeae"
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <div style="color: #fff" @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-tabs
      :before-change="beforeChange"
      type="card"
      color="#1baeae"
      style="margin-top: 10px"
    >
      <van-tab :title="item.name" v-for="item in searchList" :key="item.id">
        <div style="margin-top: 10px">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-card
              @click="handnavdetails(item.goodsId)"
              v-for="item in searchGoodsList"
              :key="item.goodsId"
              :num="item.goodsCount"
              tag="爆款"
              :price="item.sellingPrice"
              :desc="item.goodsIntro"
              :title="item.goodsName"
              :thumb="$filters.prefix(item.goodsCoverImg)"
              :origin-price="item.sellingPrice"
            />
          </van-list>
        </div>
        <van-empty
          v-if="searchGoodsList.length === 0"
          class="custom-image"
          image="https://img.yzcdn.cn/vant/empty-image-error.png"
          description="请输入您要搜索的商品"
        />
      </van-tab>
    </van-tabs>
  </div>
  <Tabber />
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import Tabber from "@/components/Tabber.vue";
import { searchList } from "@/utils/local-data";
import { search } from "@/utils/apis/good";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "NavBar",
  components: { Tabber },
  setup() {
    const state = reactive({
      searchValue: "",
      searchList: searchList,
      searchGoodsList: [],
      searchObj: {
        pageNumber: 1,
        keyword: "",
        orderBy: "",
      },
      loading: false,
      finished: false,
      totalPage: -0,
    });
    const router = useRouter();
    const init = async () => {
      if (!state.searchObj.keyword) {
        state.loading = false;
        return;
      }
      state.totalPage = 0;
      const res = await search(state.searchObj);
      state.searchGoodsList = res.data.list;
      state.totalPage = res.data.totalPage;
      state.finished = false;
      state.loading = false;
      // totalPage currPage
    };
    const getMore = async () => {
      //
      if (!state.searchObj.keyword) {
        state.loading = false;
        return;
      }
      console.log(state.totalPage, state.searchObj.pageNumber);
      if (state.totalPage == state.searchObj.pageNumber) {
        state.finished = true;
        return;
      }
      state.searchObj.pageNumber++;
      const res = await search(state.searchObj);
      state.searchGoodsList = state.searchGoodsList.concat(res.data.list);
      state.totalPage = res.data.totalPage;
      console.log("加载更多", state.searchGoodsList);
      state.loading = false;
    };
    const onSearch = async () => {
      if (!state.searchValue) {
        Toast("请输入搜索关键字");
        state.searchGoodsList = [];
        return;
      }
      state.searchObj.keyword = state.searchValue;
      await init();
    };

    const beforeChange = async (index: number) => {
      if (!state.searchValue) {
        Toast("请输入搜索关键字");
        return false;
      }
      state.totalPage = 0;
      state.loading = false;
      state.searchObj.pageNumber = 1;
      state.searchObj.orderBy = state.searchList[index].id;
      await init();
      //异步切换 需要返回 true false
      return true;
    };
    const onLoad = () => {
      getMore();
    };
    const handnavdetails = (id: string) => {
      router.push({
        path: "/goodsDetails",
        query: {
          id,
        },
      });
    };
    onMounted(() => {
      // init();
    });
    return { ...toRefs(state), onSearch, beforeChange, onLoad, handnavdetails };
  },
});
</script>
<style lang="scss">
.search_box {
  .van-card {
    background-color: #fff;
  }
}
</style>
